import { Component } from "react";

import SonSon from "./SonSon";
import NameContext from "./NameContext";
import ColorContext from "./ColorContext";

export default class Son extends Component {
  render() {
    return (
      <NameContext.Consumer>
        {(value) => (
          <ColorContext.Consumer>
            {(color) => (
              <div className="box">
                <p>Son</p>
                <ul>
                  <li>NameContext: {value}</li>
                  <li>ColorContext: {color}</li>
                </ul>

                <hr />

                <SonSon />
              </div>
            )}
          </ColorContext.Consumer>
        )}
      </NameContext.Consumer>
    );
  }
}
